<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="file/jquery-3.3.1.min.js"></script>
    <style>
        span{color: red}
    </style>
</head>
<body>
<button type="button"> 信息</button>
<div>
    <h3>姓名 <span id="name"></span></h3>
    <h3>工资 <span id="salary"></span></h3>
    <h3>课程 <span id="lesson"></span></h3>
    <h3>网站 <span id="siteName"></span></h3>
    <h3>域名 <span id="domain"></span></h3>
</div>

</body>
<script>
    $(function () {
        $('button').click(function () {
            $.ajax({
                type:'GET',
                url:'file/demo.json',
                data:null,//不给url任何数据
                dataType:'json',
                //回调函数有三个参数 返回的数据 状态信息 当前请求对象（XHR）
                success:function (data) {
                    $('#name').text(data.name);
                    $('#salary').text(data.salary);
                    $('#lesson').text(data.lesson[3]);
                    $('#siteName').text(data.website.siteName);
                    $('#domain').text(data.website.domain);
                }
            })
        })
    })
</script>
</html>